import React, { Component, useState } from "react";
import "./home.scss";

// 引入antd
import {
  Table,
  Button,
  Drawer,
  Form,
  Col,
  Row,
  Input,
  Select,
  DatePicker,
} from "antd";
import { PlusOutlined } from "@ant-design/icons";

// 引入axios
import axios from "axios";

// 引入高阶组件
import WithLogin from "../../hoc/WithLogin";

const { Option } = Select;

class Home extends Component {
  constructor(props) {
    super(props);

    this.onsubMit = this.onsubMit.bind(this);
  }

  state = {
    data: [],
    visible: false,
  };

  onsubMit = async () => {};

  async componentDidMount() {
    const res = await axios.get("/api/searchCurList", {
      params: {
        pageSize: 5,
        pageNum: 1,
      },
    });

    // console.log(res.data.data);
    this.setState(
      {
        data: res.data.data,
      },
      () => {
        console.log(this.state.data);
      }
    );
  }

  // 抽屉组件
  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  render() {
    const columns = [
      {
        title: "名字",
        dataIndex: "name",
      },
      {
        title: "技能",
        dataIndex: "jineng",
        sorter: {
          compare: (a, b) => a.jineng - b.jineng,
          multiple: 3,
        },
      },
      {
        title: "理论",
        dataIndex: "lilun",
        sorter: {
          compare: (a, b) => a.lilun - b.lilun,
          multiple: 2,
        },
      },
      {
        title: "日期",
        dataIndex: "date",
        sorter: {
          compare: (a, b) => a.date - b.date,
          multiple: 1,
        },
      },
    ];

    function onChange(pagination, filters, sorter, extra) {
      console.log("params", pagination, filters, sorter, extra);
    }
    return (
      <div>
        <Table
          columns={columns}
          dataSource={this.state.data}
          onChange={onChange}
        />

        <Button type="primary" onClick={this.showDrawer}>
          <PlusOutlined /> New account
        </Button>
        <Drawer
          title="Create a new account"
          width={720}
          onClose={this.onClose}
          visible={this.state.visible}
          bodyStyle={{ paddingBottom: 80 }}
          footer={
            <div
              style={{
                textAlign: "right",
              }}
            >
              <Button onClick={this.onClose} style={{ marginRight: 8 }}>
                Cancel
              </Button>
              <Button onClick={this.onClose} type="primary">
                Submit
              </Button>
            </div>
          }
        >
          <Form layout="vertical" hideRequiredMark>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="name"
                  label="名字"
                  rules={[
                    { required: true, message: "Please enter user name" },
                  ]}
                >
                  <Input placeholder="Please enter user name" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="jineng"
                  label="技能"
                  rules={[
                    { required: true, message: "Please enter user name" },
                  ]}
                >
                  <Input placeholder="Please enter user name" />
                </Form.Item>
              </Col>
            </Row>
            
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  name="lilun"
                  label="理论"
                  rules={[
                    { required: true, message: "Please enter user name" },
                  ]}
                >
                  <Input placeholder="Please enter user name" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="date"
                  label="日期"
                  rules={[
                    { required: true, message: "Please enter user name" },
                  ]}
                >
                  <Input placeholder="Please enter user name" />
                </Form.Item>
              </Col>
            </Row>

          </Form>
        </Drawer>
      </div>
    );
  }
}

export default WithLogin(Home);
